<template>
  <div class="lottery views-container wlm-table">
    <share-link :config="shareLinkConfig" ref="sharelink">
      <template slot="title">-抽奖</template>
      <template slot="el-form-item">
        <el-form-item label="小程序路径" v-if="shareLinkConfig.params.qrUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.qrUrl" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.qrUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="公众号链接" v-if="shareLinkConfig.params.linkUrl">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.linkUrl" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.linkUrl,$event)">复制</el-button>
          </el-input>
        </el-form-item>
           <el-form-item label="短链接" v-if="shareLinkConfig.params.weChat_short_url">
          <el-input style="width: 270px;" readonly placeholder="请输入内容" v-model="shareLinkConfig.params.weChat_short_url" class="input-with-select">
            <el-button slot="append" @click="handleClipboard(shareLinkConfig.params.weChat_short_url,$event)">复制</el-button>
          </el-input>
        </el-form-item>
      </template>
    </share-link>
    <div class="titleBox">
      <div class>
        <span>抽奖活动：{{luckTitle}}</span>
        <div class="setWidth">
          <span>抽奖总期数：{{totalPeiods}}期</span>
        </div>
      </div>

      <div class>
        <router-link
          class="wlm-text"
          tag="span"
          :to="{path:'/application/lotteryAdd', query :{ luck_id}}"
        >
          <el-button type="primary">活动编辑</el-button>
        </router-link>
      </div>
    </div>

    <div class="wlm-table-content">
      <el-tabs
        v-model="tableFormatData.luckuser.files.state"
        type="card"
        @tab-click="filesSerch"
      >
        <el-tab-pane label="全部活动" name="0"></el-tab-pane>
        <el-tab-pane label="未开始" name="3"></el-tab-pane>
        <el-tab-pane label="进行中" name="2"></el-tab-pane>
        <el-tab-pane label="已结束" name="1"></el-tab-pane>
      </el-tabs>
      <el-table
        :ref="tableFormatData.luckuser.key"
        :data="tableFormatData.luckuser.tableData"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
       <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="date" label="抽奖期数" min-width="60">
          <template slot-scope="scope">
             <span v-if="scope.row.luck_period_id==0">暂无</span>
            <span v-else>第{{scope.row.luck_period_id}}期</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="抽奖状态" min-width="45">
          <template slot-scope="scope">
            <span v-if="scope.row.period_state==1">已结束</span>
            <span v-if="scope.row.period_state==2">进行中</span>
            <span v-if="scope.row.period_state==3">未开奖</span>
            <!-- <p style="white-space: nowrap;">开始时间:{{scope.row.luck_time[0]*1000| parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
            <p style="white-space: nowrap;">结束时间:{{scope.row.luck_time[1]*1000| parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>-->
          </template>
        </el-table-column>

        <el-table-column label="开奖方式" min-width="45">
          <template slot-scope="scope">
            <span v-if="scope.row.luck_mode==1">按时间开奖</span>

            <span v-if="scope.row.luck_mode==2">按人数开奖</span>
            <span v-if="scope.row.luck_mode==3">手动开奖</span>
            <p v-if="scope.row.is_pay==1">付费抽奖</p>
            <!--
            <p v-if="scope.row.is_pay==2">免费抽奖</p>-->
          </template>
        </el-table-column>

        <el-table-column label="开奖规则" min-width="80">
          <template slot-scope="scope">
            <div class v-if="scope.row.luck_mode==1">
              <span>开始时间：{{scope.row.start_time}}</span>
              <p>开奖时间：{{scope.row.lottery_time}}</p>
            </div>
            <div v-if="scope.row.luck_mode==2">
              <span>人数满{{scope.row.luck_begin_number}}人开奖</span>
            </div>
            <div class v-if="scope.row.luck_mode==3">
              <span>手动开奖</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="operation-group">
              <router-link
                class="wlm-text"
                tag="span"
                :to="{path:'/application/lotteryInfoList', query :{ luck_id:scope.row.luck_id,period_id:scope.row.luck_period_id}}"
              >
                <el-button type="text">抽奖用户</el-button>
              </router-link>
              <!-- <div v-if="scope.row.luck_state==2&&scope.row.luck_mode==3" class="btn-line"></div>
              <el-button v-if="scope.row.luck_state==2&&scope.row.luck_mode==3" class="wlm-text" type="text" @click="luckOpen(scope.row.luck_id)">开奖</el-button>-->
               <router-link tag="span" :to="{path:'/application/lotteryAddList', query :{ luck_id:scope.row.luck_id,period_id:scope.row.luck_period_id}}">
              <el-button class="wlm-text" type="text">抽奖订单</el-button>
               </router-link>
              <el-button
                type="text"
                v-if="scope.row.luck_mode==3&&scope.row.period_state!=1"
                @click="luckOpen(scope.row.luck_id,scope.row.luck_period_id)"
              >手动开奖</el-button>

              <el-button
                class="wlm-text"
                type="text"
                v-if="scope.row.review_show==1"
                @click="conceal(scope.row.luck_id,scope.row.luck_period_id,scope.row.review_show==2 ? 1:2)"
              >隐藏</el-button>
              <el-button
                class="wlm-text"
                type="text"
                v-if="scope.row.review_show==2"
                @click="conceal(scope.row.luck_id,scope.row.luck_period_id,scope.row.review_show==2 ? 1:2)"
              >显示</el-button>
              <!-- <div class="btn-line"></div> -->
              <el-button class="wlm-text" type="text" @click="sharelink(scope.row.luck_id,scope.row.luck_period_id)">推广</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-content flex-row flex-justify-e flex-align-c">
       <div class="footDis" >
          <div class="">
          <el-button @click="allConceal">
          批量隐藏
        </el-button>
        <el-button @click="allShow">
          批量显示
        </el-button>
        </div>
        <div class="">
          <el-pagination
          :disabled="!hasTableData"
          @size-change="listPageChange"
          @current-change="listPageChange"
          :current-page.sync="tableFormatData.luckuser.pagination.page"
          :page-sizes="tableFormatData.luckuser.pagination.pagesizes"
          :page-size.sync="tableFormatData.luckuser.pagination.list_rows"
          layout="total, sizes, prev, pager, next, jumper"
          :total="hasTableData?tableFormatData.luckuser.pagination.total : 0"
        ></el-pagination>
        </div>
       </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "@/mixins/mixins";
import ShareLink from '@/components/ShareLink/index'
import clipboard from '@/utils/clipboard'
import { luck, getLuckPeriodsList, reviewShowState,luckExtension } from "@/api/application";
export default {
  mixins: [mixins.getters("Table")],
  name: "Lotteryrecord",
   components: {
    ShareLink
  },
  data() {
    return {
      allLuck:[],
       shareLinkConfig: {
        current: 'weChatQr',
        params: {
          weChat_short_url:'',
                    qrUrl: '',
                    linkUrl: '',
                    weChatQr: '',
                    appQr: ''
        }
      },
      tableFormatData: {
        current: "luckuser",
        luckuser: {
          key: "luckuser",
          api: {
            getList: getLuckPeriodsList,
          },
          tableData: [],
          files: {
            // luck_title: "",
            // time: "",
            state: "",
            // ids: [],
            // checkall: "0",
            // Recycle: "1",
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0,
          },
        },
      },
      totalPeiods: 0,
      luck_id: 0,
      luckTitle: "",
    };
  },
  mounted() {
    // console.log("qqqqqqqqqqqqqqqqqqqqqqqqqqqq")
    // console.log(this.tableFormatData.luckuser)
    this.luck_id = this.$route.query.luck_id;

    getLuckPeriodsList({ luck_id: this.luck_id }).then((res) => {
      console.log(res);
    //  this.tableFormatData.luckuser.tableData = res.data.data.data;
      this.totalPeiods = res.data.data.luck_periods;
      this.luckTitle = res.data.data.luck_title;
    });
  },
  methods: {
    handleSelectionChange(val){
  console.log(val)
  this.allLuck=val
    },
    //批量隐藏
    allConceal(){
      let conceal=[];
       this.allLuck.map(item=>{

             conceal.push(item.luck_period_id)


       })
        console.log(conceal)
           this.conceal(this.luck_id,conceal,2)
    },
    allShow(){
 let show=[];
  this.allLuck.map(item=>{

             show.push(item.luck_period_id)


       })
 this.conceal(this.luck_id,show,1)
    },
      handleClipboard(text, event) {
      clipboard(text, event)
    },
     sharelink(luckId,period_id) {
      luckExtension({ luck_id: luckId,period_id }).then((response) => {
                const { data: { data: { weChat_qrcode, wxApp_qrcode, weChat_url, wxApp_url, url,weChat_short_url } } } = response
                this.shareLinkConfig.params.qrUrl = wxApp_url
                this.shareLinkConfig.params.linkUrl = weChat_url
                this.shareLinkConfig.params.weChatQr = weChat_qrcode
                this.shareLinkConfig.params.appQr = wxApp_qrcode
                this.shareLinkConfig.params.url = url
                this.shareLinkConfig.params.weChat_short_url = weChat_short_url
                this.shareLinkConfig.current = weChat_qrcode ? 'weChatQr' : weChat_qrcode ? 'appQr' : ''
            })
            this.$refs.sharelink.toggle()
     },
    luckOpen(id, period_id) {
      this.$confirm("是否确认开奖?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          luck({ luck_id: id, period_id }).then((response) => {
            const {
              data: { msg, code },
            } = response;
            if (code === 1) {
              this.$message({
                type: "success",
                message: "开奖成功!",
              });
              this.$nextTick(() => {
                this.filesSerch();
              });
            } else {
              this.$message.error(msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消开奖",
          });
        });
    },
    conceal(luck_id, period_id, state) {
      console.log(period_id)
      reviewShowState({ luck_id, period_id, state}).then(
        (res) => {
          console.log(res);
          const {
            data: { msg, code },
          } = res;
          if (code === 1) {

            this.$message({
              type: "success",
              message: "操作成功!",
            });
 this.filesEmpty();
          } else {
            this.$message.error(msg);
          }
        }
      );
    },
  },
};
</script>

<style lang="less"  scoped>
.footDis{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.titleBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #f7f7f7;
  margin-bottom: 30px;
}
.setWidth {
  margin-top: 10px;
}
</style>
